<div id="id_list_compl_cargoes" xmlns="http://www.w3.org/1999/xhtml"
     xmlns:h="http://xmlns.jcp.org/jsf/html"
     xmlns:f="http://xmlns.jcp.org/jsf/core"
     xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
     xmlns:p="http://primefaces.org/ui">
    
    <p:dataTable var="cargo" value="#{listCargo.claimedCargos}" style="text-align: center;">
        <p:column headerText="Id" width="94">
            <h:link value="#{cargo.trackingId}" id="trackingId"
                    outcome="show.xhtml?faces-redirect=true" style="text-decoration: none;" >
                <f:param name="trackingId" value="#{cargo.trackingId}" />                
                <i class="fa fa-info-circle" style="color: #999999;"></i>
            </h:link>
            <p:tooltip id="toolTipFade" for="trackingId" value="Click to see history." />
        </p:column>

        <p:column headerText="Origin">
            <h:outputText value="#{cargo.originName}  " /> -
            <h:outputText value="#{cargo.originCode}" style="color: #999999;font-size:.8em;"/>
        </p:column>

        <p:column headerText="Destination">
            <h:outputText value="#{cargo.finalDestinationName}  " /> -
            <h:outputText value="#{cargo.finalDestinationCode}" style="color: #999999;font-size:.8em;"/>
        </p:column>

    </p:dataTable>
    
</div>